﻿<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/InSite.Master" CodeBehind="GalleryUpdate.aspx.vb" Inherits="Core.GalleryUpdate" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


<!-- Begin Plugin + Script SWF UPLOAD -->
    <script type="text/javascript" src="/static/inSite/js/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="/static/inSite/js/jquery.swfupload.js"></script>
    <script type="text/javascript">
        var id;
        var idtxtListImg;
        idtxtListImg = 'ctl00_ContentPlaceHolder1_lb_ID'; // DEV envi
        idtxtListImg = 'ContentPlaceHolder1_lb_ID'; // PRO envi
        $(document).ready(function () {
            // Lấy giá trị ID từ label Gallery ID
            id = $('#' + idtxtListImg).text();
            
            var arFiles;
            var cntImg; // Biến lưu tổng số file đã chọn
            var cnt; // Biến lưu số file đã upload xong
            cnt = 0;
            cntImg = 0;
            arFiles = '';
            $(function () {
                $('#swfupload-control').swfupload({
                    upload_url: "upload.aspx",
                    file_size_limit: "1 MB",
                    file_types: "*.jpg;*.png;*.gif",
                    file_types_description: "Images Files",
                    file_upload_limit: 20,    // Zero means unlimited
                    flash_url: "/static/inSite/js/swfupload/swfupload.swf",
                    button_image_url: '/static/inSite/js/swfupload/XPButtonNoText_160x22.png',
                    button_width: 160,
                    button_height: 22,
                    button_text: '<span class="button">Chọn ảnh... <span class="buttonSmall">(tối đa 2 MB)</span></span>',
                    button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                    button_text_top_padding: 1,
                    button_text_left_padding: 5,
                    button_placeholder: $('#button')[0],
                    debug: false,
                    post_data: 'ngantran',
                    post_params: { "GalleryID": id} // truyền 1 param sang bên upload.aspx
                })
		    .bind('fileQueued', function (event, file) {
		        var listitem = '<li id="' + file.id + '" >' +
				    'File: <em>' + file.name + '</em> (' + Math.round(file.size / 1024) + ' KB) <span class="progressvalue" ></span>' +
				    '<div class="progressbar" ><div class="progress" ></div></div>' +
				    '<p class="status" style="color: #333" >Chờ uppload</p>' +
				    '<span class="cancel" >&nbsp;</span>' +
				    '</li>';
		        $('#log').append(listitem);
		        $('li#' + file.id + ' .cancel').bind('click', function () {
		            var swfu = $.swfupload.getInstance('#swfupload-control');
		            swfu.cancelUpload(file.id);
		            $('li#' + file.id).slideUp('fast');
		        });
		        // start the upload since it's queued
		        //$(this).swfupload('startUpload');
		    })
		    .bind('fileQueueError', function (event, file, errorCode, message) {
		        alert('Dung lượng file <' + file.name + '> bạn chọn lớn hơn quy định, hãy chọn lại.');
		    })
		    .bind('fileDialogComplete', function (event, numFilesSelected, numFilesQueued) {
		        //$('#queuestatus').text('You Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
		        cntImg = numFilesSelected
		    })
		    .bind('uploadStart', function (event, file) {
		        $('#log li#' + file.id).find('p.status').text('Đang upload...');
		        $('#log li#' + file.id).find('span.progressvalue').text('0%');
		        $('#log li#' + file.id).find('span.cancel').hide();
		    })
		    .bind('uploadProgress', function (event, file, bytesLoaded) {
		        //Show Progress
		        var percentage = Math.round((bytesLoaded / file.size) * 100);
		        $('#log li#' + file.id).find('div.progress').css('width', percentage + '%');
		        $('#log li#' + file.id).find('span.progressvalue').text(percentage + '%');
		    })
		    .bind('uploadSuccess', function (event, file, serverData) {
		        // alert ra thong tin ma file upload.aspx.vb response.write ra (day la file name tren server)
		        //alert(serverData); 

		        var item = $('#log li#' + file.id);
		        item.find('div.progress').css('width', '100%');
		        item.find('span.progressvalue').text('100%');
		        //var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >View &raquo;</a>';
		        //item.addClass('success').find('p.status').html('<font color="#339933">Hoàn tất!!!</font> | '+pathtofile);
		        item.addClass('success').find('p.status').html('<font color="#339933">Hoàn tất!!!</font>');
		        arFiles = arFiles + serverData + '|';
		        $('input#ContentPlaceHolder1_TextBox2').val(arFiles);

		    })
		    .bind('uploadComplete', function (event, file) {
		        // upload has completed, try the next one in the queue
		        $(this).swfupload('startUpload');
		        cnt = cnt + 1; // Mỗi khi upload thành công 1 file thi nâng biến này lên 1
		        if (cntImg == cnt) { location.reload(); } // Kiểm tra sau khi upload đủ số lượng file lên server thì RELOAD lại trang để show lại dữ liệu
		    })

            });

        });
        
    </script>
    <link rel="stylesheet" href="/static/inSite/css/SWFupload.css" type="text/css" media="all" />
<!-- END Plugin + Script SWF UPLOAD -->    
    
    <br /><br />
    <div style="display:none;"><asp:TextBox ID="txtListImg" runat="server"></asp:TextBox></div>
    
    <script type="text/javascript">
        var lstID;
        lstID = "";
        //lstSRC = "";
        function chkLI(id) {
            obj = jQuery('#li'+ id);
            //obj.css('background', 'red');
            //alert(obj.css('border-color'));
            if (obj.css('border-color') == 'rgb(0, 149, 253)' || obj.css('border-color') == 'rgb(204, 204, 204)') {
                //alert(2);
                //alert(obj.css('background-color'));
                obj.css('border-color', '#FF7A00');
                obj.css('border-style', 'solid');
                lstID = lstID + id + ",";
                //lstSRC = lstSRC + $("#img" + id).attr("src") + "|";
                //alert(lstSRC);
            } else {
                obj.css('border-color', '#CCC');
                obj.css('border-style', 'dotted');
                lstID = lstID.replace(id + ",", "");
                //lstSRC = lstSRC.replace($("#img" + id).attr("src") + "|", "");
            }
            //alert($("#img" + id).attr("src"));
            //alert(lstID);
            $('#ContentPlaceHolder1_txtListImg').val(lstID);  // PRO envi

            //$("#ctl00_ContentPlaceHolder1_txtListSrc").val(lstSRC);
        }

        function goTab(id) {
            if (id == 1) {
                jQuery('#list').css('display', 'block');
                jQuery('#upload').css('display', 'none');
                jQuery('#spanList').css('font-weight', 'bold');
                jQuery('#spanUpload').css('font-weight', 'normal');
            } else {
                jQuery('#list').css('display', 'none');
                jQuery('#upload').css('display', 'block');
                jQuery('#spanList').css('font-weight', 'normal');
                jQuery('#spanUpload').css('font-weight', 'bold');
            }
        }
    </script>
    <fieldset style="width:825px;margin: 0 auto;" id="fieldImg">
        <legend><span id="spanList" class="naviLegend" onclick="goTab(1);" style="font-weight:bold;">Danh sách ảnh sản phẩm</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span id="spanUpload" class="naviLegend" onclick="goTab(2);">Upload ảnh</span></legend>
        <div id="list" style="display:block;">
            <div style="width:830px;float:left;text-align: center;margin-top: -5px;margin-bottom: 5px;">
                <asp:Button ID="btnDelete" runat="server" Text="Xóa" class="button" Height="26px" style="margin-top:0px;float:none;width:100px;"/>
            </div>
            <asp:SqlDataSource ID="dsListImg" runat="server"></asp:SqlDataSource>        
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="dsListImg">
                <HeaderTemplate>
                    <div style="width:830px;float:left;">
                        <ul class="lstImage">
                </HeaderTemplate>
                <ItemTemplate>
                        <li onclick="chkLI(<%# Eval("GalleryID") %>);" id="li<%# Eval("GalleryID") %>">
                            <div style="">
                                <img src="<%#getLinkImg(Eval("GalleryThumb"))%>" id="img<%# Eval("GalleryID") %>">
                            </div>
                        </li>
                </ItemTemplate>
                <FooterTemplate>
                        </ul>
                    </div>         
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <div id="upload" style="display:none;">
            <!-- Begin Form Upload -->    
            <div id="swfupload-control">
                <input type="button" id="button" />
                <!--<p id="queuestatus" ></p>-->
                <ol id="log"></ol>
            </div>
            <!-- Khai báo 1 label de luu ID gallery và SWF sẽ lấy giá trị từ label này truyền sang cho file upload.aspx -->
            <div style="display:none;"><asp:Label runat="server" ID="lb_ID" Text="" Visible="true"></asp:Label></div>
            <input type=button onclick="$('#swfupload-control').swfupload('startUpload');" value="Upload" class="button" style="height: 26px;float: none;">
            <!-- END Form Upload --> 
        </div>
    </fieldset>
</asp:Content>
